.topic-thumbnail-likes {
  display: none;
}

.topic-thumbnails-list,
.topic-thumbnails-grid,
.topic-thumbnails-masonry,
.topic-thumbnails-minimal,
.topic-thumbnails-blog-style-grid {
  .topic-list-thumbnail {
    background: var(--primary-low);
    position: relative;
    float: left;
    margin-right: 10px;
    width: 140px;
    height: 100px;
    overflow: hidden;

    &.landscape {
      .background-thumbnail {
        display: none;
      }

      .main-thumbnail {
        object-fit: cover;
      }
    }

    // Blurred background image
    .background-thumbnail {
      z-index: 0;
      position: absolute;
      object-fit: cover;

      $blur_size: 4px;
      filter: blur(#{$blur_size});
      width: calc(100% + 4 * #{$blur_size});
      height: calc(100% + 4 * #{$blur_size});
      top: calc(-2 * #{$blur_size});
      left: calc(-2 * #{$blur_size});
    }

    // Tint background to blend with $secondary
    &::after {
      z-index: 1;
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--secondary);
      opacity: 0.4;
    }

    .main-thumbnail {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .thumbnail-placeholder {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;
      color: var(--primary-medium);
      display: flex;
      align-items: center;
      justify-content: center;

      .d-icon {
        width: 60%;
        height: 60%;
      }
    }
  }
}

.topic-thumbnails-grid,
.topic-thumbnails-masonry {
  margin-top: 5px;

  .topic-list-header,
  .topic-list-item-separator {
    display: none;
  }

  .topic-list-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    border: 0;
  }

  .topic-list-item {
    display: grid;
    position: relative;
    min-width: 0;
    height: 250px;
    grid-template-areas:
      " image image "
      " title activity"
      " title posters";
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr auto;
    background-color: var(--primary-low);
    border: 1px solid var(--primary-low);

    &.selected,
    &.last-visit.selected {
      border: 1px solid var(--quaternary);
    }
  }

  .topic-list-thumbnail {
    z-index: 0;

    // position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    grid-area: image;

    .background-thumbnail {
      height: calc(150%);
    }
  }

  .activity,
  .main-link,
  .posters {
    z-index: 2;
    position: relative;
    background-color: rgb(var(--primary-low-rgb), 0.85);
    max-width: none;
  }

  &.topic-list .posters {
    height: auto;
    grid-area: posters;
    padding: 0 10px 10px 10px;
    display: flex;
    justify-content: flex-end;
    width: auto;

    a {
      display: block;
      width: auto;
      margin: 0;

      &:first-of-type {
        display: block;
      }

      &:not(:first-of-type) {
        display: none;
      }
    }
  }

  .posts-map,
  .views,
  .topic-excerpt {
    display: none;
  }

  .main-link {
    grid-area: title;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .num.activity {
    grid-area: activity;
    display: flex;
    justify-content: flex-end;
    width: auto;
    padding: 10px;

    a {
      padding: 0;
      margin-top: auto;
    }
  }
}

.topic-thumbnails-minimal,
.topic-thumbnails-blog-style-grid {
  margin-top: 5px;

  .topic-list-header,
  .topic-list-item-separator {
    display: none;
  }

  .topic-list-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
    border: 0;
  }

  .topic-list-item {
    display: grid;
    position: relative;
    min-width: 0;
    height: 250px;
    grid-template-areas:
      " image image image"
      " title likes posts";
    grid-template-rows: 1fr 45px;
    grid-template-columns: 70% minmax(0, 15%) minmax(0, 15%);
    border-bottom: none;

    &.visited {
      background-color: transparent !important;

      .link-top-line {
        color: var(--primary-medium);
      }
    }
  }

  .topic-list-thumbnail {
    z-index: 0;
    background-color: var(--secondary);
    border-radius: 0.5em;
    border: 1px solid var(--primary-low);
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    top: 0;
    left: 0;
    grid-area: image;
    overflow: hidden;
  }

  .activity,
  .main-link,
  .posters,
  .views,
  .topic-excerpt,
  .num.activity,
  .link-bottom-line {
    display: none;
  }

  .topic-thumbnail-likes {
    grid-area: likes;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-low-mid);
    overflow: hidden;

    .number {
      font-size: 13px;
      font-weight: bold;
    }

    .d-icon {
      font-size: 13px;
      margin-right: 0.5em;
    }
  }

  .posts-map {
    padding: 0;
    grid-area: posts;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: auto !important; // overrides very specific core style

    .badge-posts {
      padding: 0;
    }

    span.number {
      color: var(--primary-low-mid);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 13px;

      &::before {
        content: "";
        background-color: var(--primary-low-mid);
        mask-repeat: no-repeat;
        mask-image: url('data:image/svg+xml; utf8, <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="comment" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-comment fa-w-16 fa-2x"><path fill="gray" d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z" class=""></path></svg>');
        display: block;
        height: 13px;
        width: 13px;
        margin-right: 0.5em;
      }
    }
  }

  .main-link {
    grid-area: title;
    padding: 10px 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 600;
    width: 100%;

    .link-top-line {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--primary);

      a.title {
        color: var(--primary);
        padding: 0 !important;
      }
    }
  }

  .d-tooltip-content {
    white-space: normal;
  }
}

.topic-thumbnails-blog-style-grid {
  .num.posts-map {
    display: none;
  }

  .topic-list-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
    border: 0;
  }

  .topic-list-item {
    height: auto;
    grid-template-rows: 200px auto min-content min-content;
    grid-template-areas:
      "image image image"
      "content content content"
      "data data data"
      "activity activity activity";
  }

  .main-link {
    grid-area: content;

    .docs-topic-link {
      display: unset;
    }

    .link-top-line {
      color: var(--tertiary);
    }
  }

  .link-bottom-line {
    display: block;

    .badge-wrapper {
      display: none;
    }
  }

  .topic-excerpt {
    display: block;
    font-weight: normal;
  }

  .topic-thumbnail-blog-data {
    grid-area: data;
    display: flex;
    align-items: flex-start;
    gap: 1em;
  }

  .topic-thumbnail-blog-data-activity {
    display: block;
  }

  .topic-list-data:last-of-type {
    display: none;
  }

  .topic-thumbnail-blog-data-likes,
  .topic-thumbnail-blog-data-comments,
  .topic-thumbnail-blog-data-views,
  .topic-thumbnail-blog-data-activity {
    grid-area: likes;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--primary-low-mid);
    width: auto;

    .number {
      font-size: var(--font-down-1);
      font-weight: bold;
    }

    .d-icon {
      font-size: var(--font-down-1);
      margin-right: 0.5em;
    }

    a {
      color: var(--primary-low-mid);
      font-size: var(--font-down-1);
      font-weight: bold;
    }
  }
}

.topic-thumbnails-masonry {
  /*
    Variables set by javascript:
    --masonry-num-columns
    --masonry-tallest-column
    --masonry-grid-spacing
    --masonry-column-width
  */
  position: relative;
  height: var(--masonry-tallest-column);

  .topic-list-item {
    /*
      Variables set by javascript:
      --masonry-height
      --masonry-height-above
      --masonry-column-index
    */
    position: absolute;
    height: var(--masonry-height);
    width: var(--masonry-column-width);
    left: calc(
      (var(--masonry-column-width) + var(--masonry-grid-spacing)) *
        var(--masonry-column-index)
    );
    top: var(--masonry-height-above);
  }
}
